import { Component, OnInit, Input, Output, EventEmitter, Injectable } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
import { Router } from '@angular/router';
import { _HttpClient } from '@delon/theme';
import { DatePipe } from '@angular/common';

@Component({
    selector: 'app-table',
    templateUrl: './table.component.html',
    styles: [`
        .round{display:block;width:20px;height:20px;line-height:20px;margin:2px auto 0 auto;border-radius:50%;}
        .statusText{margin:2px 0 0 3px;}
        .linkScroll{overflow-x:hidden;overflow-y:auto;max-height:105px;}
        .linkScroll a{display:block;}
        :host ::ng-deep .ant-input:focus{box-shadow:0 0 0 transparent}
    `]
})

@Injectable({ providedIn: 'root' })

export class TableComponent implements OnInit {
    @Output() private clickDetail = new EventEmitter();
    @Input() headData: any;
    @Input() tableId: any;
    @Input() tableScroll: any;
    @Input() plainData: any;

    apiUrl = '';
    apiParam = '';
    noborder = { 'padding': '0', 'background-color': 'transparent', 'border': '1px solid transparent', 'text-align': 'center' };

    bodyData: any = [];
    ObjectKeys = [];
    fullscreen = true;

    allChecked = false;
    indeterminate = false;
    loading = true;
    displayData = [];
    selectedValue = '20';
    pageTotal = '';
    rowTotalTable = '0';
    pageValue = '1';
    typeName = '';

    constructor(
        public msg: NzMessageService,
        public datePipe: DatePipe,
        private router: Router,
        private http: _HttpClient
    ) { }

    ngOnInit() {
        this.typeName = window.location.href.split('/')[window.location.href.split('/').length - 1];
    }

    loadList(url, param) {
        this.apiUrl = url;
        this.apiParam = param;
        this.loading = true;
        this.bodyData = [];
        const newParam = '?page=' + this.pageValue + '&limit=' + this.selectedValue + param;
        // 请求后获取的数据
        this.http.get(url + newParam).subscribe((res: any) => {
            if (!res.code) {
                this.bodyData = res.data;
                this.pageTotal = res.count;
                this.rowTotalTable = res.count;
                for (const item of this.bodyData) {
                    switch (item.vcStatus) {
                        case '0': item.status = '工区签收'; break;
                        case '1': item.status = '车间编制'; break;
                        case '2': item.status = '车间批准'; break;
                        case '3': item.status = '车间驳回'; break;
                        case '4': item.status = '段批准'; break;
                        case '5': item.status = '段驳回'; break;
                    }
                    // checkbox是否禁用
                    switch (this.typeName) {
                        case 'station': 
                            item.disabled = true;
                            if (item.vcStatus === '1' || item.vcStatus === '5') {
                                item.disabled = false;
                            }
                            break;
                        case 'seg':
                            if (item.vcStatus !== '2') {
                                item.disabled = true;
                            }
                            break;
                    }
                    item.vcYearMonth = item.vcYear + '年' + item.vcMonth + '月';
                    item.dtEditdate = this.datePipe.transform(item.dtEditdate, 'yyyy-MM-dd');
                    item.sedate = this.datePipe.transform(item.dtWeeksdate, 'MM月dd日') + ' ~ ' + this.datePipe.transform(item.dtWeekedate, 'MM月dd日');
                }
                // 字段和表头排序
                this.ObjectKeys = this.plainData ? this.plainData : Object.keys(this.bodyData);
            }
            this.loading = false;
        });
    }
    getAllData() {
        return this.displayData;
    }
    operaRow(data) {
        data.typeName = this.typeName;
        this.router.navigate(['workAreaWeave/calendar'], {
            queryParams: data
        });
    }
    detail(data, item) {
        this.clickDetail.emit(JSON.stringify(data) + '|' + item);
    }
    rowChangeTable(ev) {
        this.pageValue = ev;
        this.loadList(this.apiUrl, this.apiParam);
    }
    selectedChange() {
        this.pageValue = '1';
        this.loadList(this.apiUrl, this.apiParam);
    }
    currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean; disabled: boolean; }>): void {
        this.displayData = $event;
        this.refreshStatus();
    }
    refreshStatus(): void {
        const allChecked = this.displayData.filter(value => !value.disabled).every(value => value.checked === true);
        const allUnChecked = this.displayData.filter(value => !value.disabled).every(value => !value.checked);
        this.allChecked = allChecked;
        this.indeterminate = (!allChecked) && (!allUnChecked);
    }
    checkAll(value: boolean): void {
        this.displayData.forEach(data => {
            if (!data.disabled) {
                data.checked = value;
            }
        });
        this.refreshStatus();
    }
}
